<template>
  <div class="auth-manage">
    <div class="header">
      <tabBtn
        :tabList="tabList"
        @change="tabChange"/>
    </div>
    <div class="auth-child-wrapper">
      <menuList v-if="currTabName === 'menu'"/>
      <tenantList v-if="currTabName === 'tenant'"/>
      <accountList v-if="currTabName === 'account'"/>
      <rolesList v-if="currTabName === 'role'"/>
      <tenantAuth v-if="currTabName === 'auth'"/>
    </div>
  </div>
</template>
<script>
import tabBtn from '@/public/tabBtn'
import tenantList from './components/tenantList'
import accountList from './components/accountList'
import rolesList from './components/rolesList'
import tenantAuth from './components/tenantAuth'
import menuList from './components/menuList'
export default {
  components: {
    tabBtn,
    tenantList,
    accountList,
    rolesList,
    tenantAuth,
    menuList
  },
  data () {
    return {
      currTabName: '',
      tabList: [
        {label: '菜单管理', type: 'menu'},
        {label: '租户列表', type: 'tenant'},
        {label: '账号管理', type: 'account'},
        {label: '角色管理', type: 'role'},
        {label: '租户权限', type: 'auth'}
      ]
    }
  },
  methods: {
    tabChange (type) {
      this.currTabName = type
    }
  }
}
</script>
<style lang="stylus" scoped>
.auth-manage
  height 100%
  background #fff
  border-radius 10px
  .header
    width 100%
    padded_box(border-box, 18px 20px)
  .auth-child-wrapper
    width 100%
    height calc(100% - 68px)
    padded_box(border-box, 0 20px 18px)
</style>
